import 'package:course_control/app/routes/app_pages.dart';
import 'package:course_control/config/com_colors.dart';
import 'package:course_control/utils/utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_utils/flutter_utils.dart';
import 'package:flutter_widgets/flutter_widgets.dart';
import 'package:from_css_color/from_css_color.dart';
import 'package:get/get.dart';
import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';
import '../../../../config/styles.dart';
import '../../../../gen/assets.gen.dart';
import '../../../../widgets/widgets.dart';
import '../controllers/home_controller.dart';
import '../widgets/tab_chanel.dart';
import '../widgets/voice_card.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20.ratio, vertical: 50.ratio),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            _buildTeach(),
            SizedBox(
              width: 20.ratio,
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TabChanel(controller: controller.channelController),
                  SizedBox(
                    height: 20.ratio,
                  ),
                  const Expanded(child: VoiceCard())
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildTeach() {
    return TransparentContain(
      width: 410.ratio,
      height: 564.ratio,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Row(
            children: [
              ClipOval(
                child: FlutterLogo(
                  size: 68.ratio,
                ),
              ),
              SizedBox(
                width: 20.ratio,
              ),
              Text(
                '默认老师，早上好～',
                style: TextStyles.textStyle20,
              )
            ],
          ),
          Container(
            height: 56.ratio,
            width: 240.ratio,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: fromCssColor('#FF841A'),
              borderRadius: BorderRadius.circular(8.ratio),
            ),
            child: Text('已上课03:48分钟', style: TextStyles.textStyle20),
          ),
          const FinishAniView(),
          Text(
            '长按下课',
            style: TextStyles.textStyle20,
          )
        ],
      ),
    );
  }
}

class FinishAniView extends StatefulWidget {
  const FinishAniView({Key? key}) : super(key: key);

  @override
  State<FinishAniView> createState() => _FinishAniViewState();
}

class _FinishAniViewState extends State<FinishAniView> {
  final ValueNotifier<double> valueNotifier = ValueNotifier<double>(0);
  bool _isCancel = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    valueNotifier.dispose();
    super.dispose();
  }

  addValue() async {
    _isCancel = false;
    for (double i = 0; i <= 100; i++) {
      await Utils.timeout(milliseconds: 20);
      valueNotifier.value = i;
      if (_isCancel) {
        break;
      }
    }
    if (valueNotifier.value == 100) {
      LogUtil.logD('end');
      Get.offAllNamed(Routes.START);
    } else {
      LogUtil.logD('cancel');
      cancelValue();
    }
  }

  cancelValue() {
    _isCancel = true;
    valueNotifier.value = 0;
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Stack(
        children: [
          CommonImage.asset(Assets.images.startNormal.path, width: 214.ratio),
          Positioned.fill(
            child: SimpleCircularProgressBar(
              size: 214.ratio,
              progressColors: [
                YJColors.primaryColor.withOpacity(0.4),
                YJColors.primaryColor
              ],
              startAngle: 0,
              maxValue: 100,
              mergeMode: true,
              animationDuration: 0,
              valueNotifier: valueNotifier,
            ),
          )
        ],
      ),
      onLongPress: () {
        LogUtil.log('long press');
        addValue();
      },
      onLongPressCancel: () {
        LogUtil.log('long press cancel');
        cancelValue();
      },
      onLongPressEnd: (location) {
        LogUtil.log('long press end');
        cancelValue();
      },
    );
  }
}
